<template>
  <div>
    <el-container>
      <el-header class="header"  >
        <p>百慕大影城管理系统</p>
        <span>未登录 | 欢迎：张三</span>
      </el-header>
      <el-container>
        <el-aside style="width: 200px; "> 
            <el-menu 
            :default-active="active"
            active-text-color="#efefef"
            background-color="#444"
            text-color="#aaa" 
            style="height: calc(100vh - 60px); border: 0;"
             >
            <el-menu-item index="1">指南</el-menu-item>
            <el-menu-item index="2">组件</el-menu-item>
            <el-submenu index="3">
                <template slot="title">
                   主题
                </template>
                <el-menu-item index="3.1">中国红</el-menu-item>
                <el-menu-item index="3.2">炫酷黑</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">资源</el-menu-item>
            </el-menu>
        </el-aside>
        <el-main style="background: #e6a23c;"></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
        active:'1'
    };
  },
};
</script>

<style lang="scss" scoped>
    .header{
        background-color: #444;
        color: white;
        display: flex;
        align-items: center;

        p{
            font-size: 1.2em;
            font-weight: bold;
            flex: 1;
        }
    }
</style>
